<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData">
    <template v-slot:extension>
      <z-tab
        v-model:active="tabActive"
        :tabList="tabList"
        top="13"
        @click-tab="setActive"
      ></z-tab>
    </template>
    <template v-slot:RollingLow>
      <z-search
        placeholder="请输入优惠券名称搜索"
        v-model="inputInfo"
        @query="onSearch"
        @update:model-value="onUpdateVal"
      ></z-search>
    </template>
    <div class="coupon-container">
      <div class="coupon-container-main" v-if="cardItem">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
          <div
            class="coupon-card"
            v-for="(item, index) in cardItem"
            :key="index"
            @click="shwoMessage(index)"
          >
            <div class="coupon-card-show" :class="{canNotUse:postForm.ticketState != '1'}">
              <div class="coupon-card-main">
                <div class="coupon-card-left">
                  <div class="card-left-title">{{ item.typeCodeName }}</div>
                  <div class="card-left-value">{{ item.ticketName }}</div>
          
                  <!-- <img :src="item.attachment" class="coupon-card-img" /> -->
                </div>
                <div class="coupon-card-center">
                    <div class="center-top">
                      有效期：{{item.endData ? dayjs(item.endData).format('YYYY-MM-DD HH:mm'):'--' }}
                    </div>
                    <div class="center-main" v-if="item.typeCode == '3'">
                      兑换物品：{{ item.goodsName }}
                    </div>
                    <div class="center-main" v-if="item.typeCode == '1'">
                      减{{ item.ticketAmt }}元
                    </div>
                    <div class="center-main" v-if="item.typeCode == '2'">
                     {{ Number(item.discounts) }}折优惠
                    </div>
                    <div class="center-footer" v-if="item.useCondition == '1'"> 
                      <!-- 1 桌台限制  2 会员限制 0 无限制 -->
                      使用限制：单桌台可同时使用{{ item.roomUseNum }}张
                    </div>
                    <div class="center-footer" v-if="item.useCondition == '2'"> 
                      <!-- 1 桌台限制  2 会员限制 0 无限制 -->
                      使用限制：单次消费可用{{ item.memberUseNum }}张
                    </div>
                    <div class="center-footer" v-if="item.useCondition == '0'"> 
                      <!-- 1 桌台限制  2 会员限制 0 无限制 -->
                      无使用限制
                    </div>
                </div>
              </div>
              <div class="coupon-card-right">
                <img
                  src="@/assets/images/member/v_coupon-new.png"
                  v-if="item.isNew"
                  class="card-img-new"
                />
                <img
                  src="@/assets/images/member/v_coupon-used.png"
                  v-if="itemChecked === 1"
                  class="card-img-used"
                />
                <img
                  src="@/assets/images/member/v_coupon-expire.png"
                  v-if="itemChecked === 2"
                  class="card-img-expire"
                />
              </div>
            </div>

            <!-- <div
              class="coupon-card-illustrate"
              v-show="shwoInfo === index && isShow"
            >
              <span>使用说明：</span>
              <span v-if="item.useConditionAmt"
                >满{{ item.useConditionAmt }}元使用</span
              >
              <span v-if="item.newProperty">
                订单中需包含{{ item.newProperty }}才能使用</span
              >
            </div> -->
          </div>
        </van-list>
        <div class="coupon-container-nodate" v-if="!cardItem.length">
          <div src="" class="nodate-img"></div>
          <div class="nodate-title">暂无优惠券~</div>
        </div>
      </div>
    </div>
  </page-wrap>
</template>

<script setup>
import dayjs from 'dayjs'
const router = useRouter()
const route = useRoute()
import Api from '@/api'
import ls from '@/lib/ls'

// -----------------------------------------------------------查询--------------------------------------------------------------------
//    输入框内容
const inputInfo = ref('')
const onSearch = () => {
  postForm.ticketName = inputInfo.value
  postForm.page = 1
  loadData(true)
}
const searchTimer = ref(null)
const onUpdateVal = val => {
  clearTimeout(unref(searchTimer))
  searchTimer.value = setTimeout(() => {
    postForm.ticketName = inputInfo.value
    postForm.page = 1
    loadData(true)
  }, 500)
}
// ------------------------------------------------------切换优惠券状态（未使用、已使用、已过期）----------------------------------------
const activeIndex = ref(0) // 哪个高亮显示
const itemChecked = ref(0) // 遍历哪个数组
const setActive = e => {
  activeIndex.value = e.name
  itemChecked.value = e.name
  target.value = e.name
  switch (target.value) {
    case 0:
      // 获取优惠券（未使用）
      postForm.ticketState = '1'
      break
    case 1:
      // 获取优惠券（已使用）
      postForm.ticketState = '2'
      break
    case 2:
      // 获取优惠券（已过期）
      postForm.ticketState = '3'
      break
  }
  loadData(true)
}
const tabActive = ref(0)

const tabList = [
  {
    name: '未使用'
  },
  {
    name: '已使用'
  },
  {
    name: '已过期'
  }
]
//------------------------------------------------------优惠券是否为新------------------------------------------------------------------
// 优惠券数组
const cardItem = ref([])
// 获取跳转页面传递的参数
const memberId = route.query.memberId
// let flag = ref(true) // 是否进入页面
// const couponIsNew = ref([]) // 优惠券是否为新本地存储数组
// -----------------------------------------------------------查看优惠券使用条件--------------------------------------------------------------------
const shwoInfo = ref(-1)
let isShow = ref(false)
const shwoMessage = value => {
  if (shwoInfo.value !== value) {
    isShow.value = true
  } else {
    isShow.value = !isShow.value
  }
  shwoInfo.value = value
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
//表单
const postForm = reactive({
  memberCode: memberId,
  ticketState: '1',
  page: 1,
  pageSize: 15,
  ticketName: ''
})
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const target = ref(0) // 下拉加载更多的目标
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.page = 1
    cardItem.value = []
    finished.value = false
  }
  loading.value = true
  const GetMemberTicket = await Api.Common.AppObjProcess.Do({
    functionName: 'GetMemberTicket',
    contentData: postForm
  })
  console.log(GetMemberTicket)
  if (refresh === true) {
    if (GetMemberTicket.result.length !== postForm.pageSize) {
      finished.value = true
    }
  }

  // if (flag.value) {
  //   // 加上优惠券是否为新
  //   GetMemberTicket.result = GetMemberTicket.result.map(item => {
  //     return {
  //       ...item,
  //       showNewTag: true
  //     }
  //   })
  // }
  // 优惠券图片路径拼接
  // GetMemberTicket.result = GetMemberTicket.result.map(item => {
  //   return {
  //     ...item,
  //     attachment: import.meta.env.VITE_DOMAIN + item.attachment
  //   }
  // })
  // 优惠券使用条件（包含什么商品才可使用）
  // GetMemberTicket.result = GetMemberTicket.result.map(item => {
  //   const goodsNames = item.goodsLimit.map(goods => goods.goodsName)
  //   const newProperty = goodsNames.join(', ') // 将goodsName拼接成字符串
  //   return { ...item, newProperty }
  // })

  Array.prototype.push.apply(cardItem.value, GetMemberTicket.result)
  if (GetMemberTicket.result.length > 0) {
    postForm.page++
  } else {
    finished.value = true
  }
  loading.value = false
  if (refresh === true) {
    initBs.value++
  }
}

//------------------------------------------------------获取初始数据------------------------------------------------------------------
const Init = () => {
  target.value = 0
  loadData(true)
  // .then(() => {
  //   // flag.value = false
  //   const arr = ls.get('couponIsNew')
  //   if (!arr) {
  //     cardItem.value.forEach(item => {
  //       // 加入新的code
  //       couponIsNew.value.push(item.code)
  //     })
  //     ls.set('couponIsNew', couponIsNew.value)
  //   } else {
  //     cardItem.value.forEach(item => {
  //       if (!arr.some(i => i === item.code)) {
  //         arr.push(item.code)
  //       } else {
  //         item.showNewTag = false
  //       }
  //       ls.set('couponIsNew', arr)
  //     })
  //   }
  // })
}
Init()
</script>

<style scoped lang="scss">
@import '@/styles/l.scss';

.coupon-container-search {
  display: flex;
  margin: 10px 12px 10px 12px;
  .header-left {
    flex: 1;
    padding: 0;
    ::v-deep(.van-search__content) {
      border-radius: 20px;
      background: #2b2b33 !important;
      padding-left: 20px;
    }
    ::v-deep(.van-search__field) {
      height: 40px !important;
    }
    ::v-deep(.van-field__value) {
      padding: 3px 0 3px 0;
      font-size: 16px !important;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 16px;
    }
    ::v-deep(.van-field__control) {
      color: #ffffff;
    }
    ::v-deep(.van-field__left-icon) {
      margin-right: 8px;
      color: rgba(0, 0, 0, 0);
      background-image: url('@/assets/svg/member/v_member-search.svg');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
  .header-right {
    font-size: 16px;
    color: #ffaa00;
    line-height: 16px;
    padding: 13px 4px 13px 17px;
  }
}
.coupon-container {
  .coupon-container-main {
    margin: 0 12px;
    position: relative;
    .coupon-card {
      margin-bottom: 10px;
      border-radius: 8px;
      background-color: #45454c;
      // padding: 5px;
      .coupon-card-show {
        height: 90px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        background-image: url('@/assets/images/member/i_coupon-card3.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        padding: 5px;
        &.canNotUse{
          filter: grayscale(100%);
        }
        .coupon-card-main {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .coupon-card-left {
            width: 100px;
            text-align: center;
            height: 80px;
            padding-top: 17px;
            .card-left-title{
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 14px;
              color: #212121;
              line-height: 14px;
              padding-bottom: 8px;
            }
            .card-left-value{
              width: 100px;
              height: 40px;
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 14px;
              color: #FF3333;
              line-height: 20px;
              display: -webkit-box; /* 将元素作为弹性伸缩盒子显示 */
              -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素垂直排列 */
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2; /* 指定显示的行数为2行 */
            }
            .coupon-card-img {
              margin-left: 15px;
              margin-right: 15px;
              width: 80px;
              height: 80px;
            }
          }
          .coupon-card-center {
            padding-left: 10px;
            height: 80px;
            .center-top{
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 12px;
              line-height: 12px;
              color: #666666;
              padding-top: 12px;
            }
            .center-main{
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 16px;
              color: #212121;
              line-height: 16px;
              padding: 9px 0;
            }
            .center-footer{
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 12px;
              color: #996600;
              line-height: 12px;
            }
          }
        }
        .coupon-card-right {
          position: relative;
          img {
            position: absolute;
            top: -1px;
            right: 0px;
          }
          .card-img-new {
            width: 24px;
            height: 16px;
          }
          .card-img-used {
            width: 60px;
            height: 20px;
          }
          .card-img-expire {
            width: 60px;
            height: 20px;
          }
        }
      }

      .coupon-card-illustrate {
        padding: 4px 13px 13px 15px;
        background-color: #45454c;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
        line-height: 18px;
        border-radius: 0 0 8px 8px;
      }
    }
  }
}
.coupon-container-nodate {
  padding-top: 60px;
  text-align: center;
  .nodate-img {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    background-image: url('@/assets/images/member/i_coupon-noCoupon.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .nodate-title {
    padding-top: 12px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 16px;
  }
}
</style>
